<template>
	<view class="content">
		<uni-card class="article-card" v-for="article in articleList" :key="article.id"
			@click="handleClickCard(article)">
			<template #title>
				<view class="title" @click="handleClickCard(article)">
					<text>{{ article.title }}</text>
					<uni-icons type="right"></uni-icons>
				</view>
			</template>
			<image class="cover" v-if="article.cover" :src="SERVER_URL + article.cover" mode="widthFix"></image>
			<text class="abstract">{{ article.abstract }}</text>
			<view slot="actions" class="actions">
				<view class="actions-item">
					<uni-icons type="eye" size="18"></uni-icons>
					<text class="actions-item-text">{{ article.views_count }}</text>
				</view>
				<view class="divider"></view>
				<view class="actions-item">
					<uni-icons type="heart" size="18"></uni-icons>
					<text class="actions-item-text">{{ article.likes_count }}</text>
				</view>
				<view class="divider"></view>
				<view class="actions-item">
					<uni-icons type="chatbubble" size="18"></uni-icons>
					<text class="actions-item-text">{{ article.comments_count }}</text>
				</view>
			</view>
		</uni-card>

		<uni-load-more :status="loadMoreStatus" />
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue"
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		useUserStore
	} from "@/stores/user.js"

	const userStore = useUserStore()

	const articleList = ref([])

	const state = reactive({
		total: 0,
		page: 0,
		pageSize: 10,
		loading: false
	})

	const loadMoreStatus = computed(() => {
		if (state.loading) return 'loading'

		if (state.total > (state.page * state.pageSize)) {
			return "more"
		}

		return "noMore"
	})

	onReachBottom(() => {
		if (state.total > (state.page * state.pageSize)) {
			loadData()
		}
	})

	const loadData = () => {
		state.page += 1
		state.loading = true
		uni.request({
			url: SERVER_URL + '/article/list',
			method: "GET",
			data: {
				page: state.page,
				page_size: state.pageSize
			},
			header: {},
			success: (res) => {
				if (res.statusCode === 200) {
					console.log(res.data);
					state.page = res.data.page
					state.total = res.data.total
					articleList.value = [...articleList.value, ...res.data.data]
				} else {
					state.page -= 1
				}
			},
			fail: () => {
				state.page -= 1
			},
			complete: () => {
				state.loading = false
				uni.stopPullDownRefresh();
			}
		});

	}

	const handleClickCard = (e) => {
		console.log(e)
		uni.navigateTo({
			url: "/pages/article/detail?id=" + e.id,
		})
	}

	onPullDownRefresh(() => {
		state.total = 0
		state.page = 0
		loadData()
	})

	onLoad(() => {
		loadData()

		if (!userStore.id) {
			uni.showModal({
				title: "请先登录账号",
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/user/user"
						})
					}
				}
			})
		}
	})
</script>
<style scoped lang="scss">
	.content {
		padding-bottom: 24px;


		.article-card {
			:deep(.uni-card) {
				.uni-card__content {
					padding: 0 !important;
				}
			}



			.title {
				padding: 10px 0;
				// border-bottom: 1px #eee solid;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.cover {
				width: 100%;
				border-radius: 4px;
			}

			.actions {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 45px;
				border-top: 1px #eee solid;
			}

			.actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.actions-item-text {
					font-size: 12px;
					color: #666;
					margin-left: 5px;
				}
			}

			.divider {
				width: 1px;
				background-color: #ddd;
				height: 14px;
			}
		}
	}
</style>